import * as echarts from "echarts";
import axios from "axios";

const screen_w = window.innerWidth;
// 字体大小控制
const font_size = screen_w > 2000 ? 25 : 16
// icon大小
const icon_size = screen_w > 2000 ? 20 : 10

// grid管局屏幕微调
const grid_size = screen_w > 2000 ? {
	top: 80,
	left: 80,
	right: 50,
	bottom: 80,
	
} : {
	top: 50,
	left: 55,
	right: 10,
	bottom: 50,
}

// 仿真数据格式用于使用者确认格式用的
export const _ec_data_format = {};

/**
 * @description: 生成ec图表配置信息
 * @author: 王琛
 * @Date: 2022-11-25 15:29:43
 * @param {*}
 * @return {*}
 */
export function getOptions({
	                           series = [],
	                           axis = {},
	                           color = '43, 91, 243',
	                           title = {},
	                           tooltip = {},
	                           threshold = {},
	                           scatterPoint = {}
                           } = {}) {
	// 阀值配置
	let threshold_config = [];
	// 判断你是否有告警值
	if (threshold["giveAnAlarm"]) {
		threshold_config.push({
			type: "line",
			markLine: {
				silent: true,
				symbol: "none",
				lineStyle: {
					color: "#FFBF00",
				},
				data: [
					{
						yAxis: threshold["giveAnAlarm"],
					},
				],
				label: {
					show: false,
				}
			}
		})
		
	}
	// 判断是否有预警值
	if (threshold["earlyWarning"]) {
		threshold_config.push({
			type: "line",
			markLine: {
				silent: true,
				symbol: "none",
				lineStyle: {
					color: "#d80e12",
				},
				data: [
					{
						yAxis: threshold["earlyWarning"],
					},
				],
				label: {
					show: false,
				}
			}
		})
	}
	// 判断是否有散点数据
	let scatterData = [];
	if (scatterPoint?.data.length) {
		scatterData.push({
			symbolSize: icon_size,
			symbol: 'diamond',
			data: scatterPoint.data,
			type: 'scatter',
			itemStyle: {
				color: 'red'
			},
			name: "报警点",
			z:10,
		})
	}
	// 主配置文件
	let options = {
		title: [
			{
				text: title?.name || '涂布正极一线',
				left: 'center',
				top: 15,
				textStyle: {
					color: "#FFBF00",
					fontSize: font_size + 3,
				}
			}
		],
		//你的代码
		tooltip: {
			trigger: 'axis',
			padding: [2, 5],
			borderWidth: 1,
			borderColor: 'yellow' ,
			backgroundColor:"rgba(255,255,255,.7)",
			axisPointer: {
				type: 'line',
				lineStyle: {
					type: "solid",
				}
			},
			textStyle: {
				fontSize: font_size
			},
			formatter: (params) => {
				let _one_row = `<div style="color:#000000">${params[0].axisValueLabel}</div>`
				let _cur_str = params.map(e => `${e.marker.replace("width:10px;height:10px;", `width:${icon_size}px;height:${icon_size}px;margin-left:15px;`)}<span style="font-size:${font_size};color:#000000;margin-left:10px">${e.seriesName}</span><span style="font-size:${font_size};color:#000000;margin-left:10px">${e.data[1]}</span><span style="font-size:${font_size};color:#000000;margin-right:10px">${tooltip?.company || ""}</span><br />`);
				return `${_one_row}${_cur_str.join(" ")}`
			}
		},
		legend: {
			bottom: 0,
			textStyle: {
				color: 'rgba(212, 232, 254, 1)',
				fontSize: font_size
			},
			itemWidth: icon_size+2,
			itemHeight: icon_size,
		},
		grid: grid_size,
		xAxis: {
			type: "time",
			axisLabel: {
				//坐标轴刻度标签的相关设置
				textStyle: {
					color: 'rgb(255,255,255)',
					padding: 5,
					fontSize: font_size
				},
				formatter: function (data, index) {
					const _timeStamp = new Date(data);
					return index == 1 ? _timeStamp.format("MM-dd") : _timeStamp.format("hh:mm");
				}
			},
			axisTick: {
				show: true,
				length: 3
			},
		},
		yAxis: [
			{
				name: tooltip?.company || "",
				nameTextStyle: {
					color: "#fff",
					fontSize: font_size
				},
				splitLine: {
					show: false,
				},
				axisLine: {
					show: false,
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: 'rgb(255,255,255)',
						padding: 2,
						fontSize: font_size,
					},
					formatter: function (value) {
						if (value === 0) {
							return value;
						}
						return value;
					}
				},
				axisTick: {
					show: false
				}
			}
		],
		series: [
			//
			...threshold_config,
			// 数据对象
			...series.map(e => getSeries(e)),
			// 散点数据
			...scatterData,
		]
	};
	return options;
}

/**
 * @description: 有些表图数据需要通过js处理得到,结合实际业务来确定师傅哦哦使用次函数,如不适用可以删除掉
 * @author: 王琛
 * @Date: 2023-03-09 14:53:48
 * @param {*}
 * @return {*}
 */
export function getSeries({name = "我是标题", data = [], lineColor = "rgb(255,255,255)"} = {}) {
	const _data = data.map(e => [Number(e[0]), Number(e[1])])
	let _series = {
		name,
		type: 'line',
		symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
		showAllSymbol: true,
		symbolSize: 0,
		smooth: true,
		lineStyle: {
			width: 2,
			color: lineColor, // 线条颜色
		},
		markPoint: {
			label: {},
		},
		itemStyle: {
			color: lineColor,
			borderColor: '#646ace',
			borderWidth: 0
		},
		tooltip: {
			show: true
		},
		data: _data
	};
	return _series;
}





// "{
// ""data"": {
// 	""arcWarning"": null,
// 		""arcDeviceType"": 0,
// 		""type"": 0,
// 		""loopName"": null,
// 		""a_Value"": { //A相数据
// 		""1684425792000"": 15.8,
// 	},
// 	""c_Value"": {},//C相数据
// 	""b_Value"": {},//B相数据
// 	""d_Value"": { //模块温度
// 		""1684425792000"": 19.5,
// 	},
// 	""n_Value"": { //N相数据
// 		""1684483818000"": 49.9
// 	}
// },
// ""code"": 200,
// 	""msg"": ""成功""
// }"
